<script setup>
import axios from '@/utils/axios'
import { client, getFileNameUUID } from '@/utils/alioss'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import WangEditor from 'wangeditor'

const tableRef = ref(null)
const editor = ref(null)

// 分页数据
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)
const goodsList = ref([])

// 添加商品表单数据
const addForm = ref({
  pname: '',
  price: '',
  stock: '',
  status: 0,
  pdesc: '',
  pdetails: '',
  images: [], // 存储商品图片URL
  thumbnail: '' // 专门存储缩略图URL
})

// 编辑商品表单数据
const editForm = ref({
  pid: '',
  pname: '',
  price: '',
  stock: '',
  status: 0,
  pdesc: '',
  pdetails: '',
  images: [],
  thumbnail: ''
})

// 富文本编辑器实例
let addEditorInstance = null
let editEditorInstance = null

// 控制添加商品对话框显示
const addDialogVisible = ref(false)

// 控制编辑商品对话框显示
const editDialogVisible = ref(false)

// 初始化添加商品的富文本编辑器
const initAddEditor = () => {
  if (addEditorInstance) {
    addEditorInstance.destroy()
  }

  addEditorInstance = new WangEditor(editor.value)

  // 配置编辑器
  addEditorInstance.config.showLinkImg = false
  addEditorInstance.config.showLinkImgAlt = false
  addEditorInstance.config.showLinkImgHref = false
  addEditorInstance.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
  addEditorInstance.config.uploadFileName = 'file'

  // 自定义图片上传到阿里云OSS
  addEditorInstance.config.customUploadImg = async (files, insertImgFn) => {
    try {
      const ossClient = client()

      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const fileName = 'abc/sp'+getFileNameUUID() + '.' + file.name.split('.').pop()

        // 上传文件到OSS
        const result = await ossClient.put(fileName, file)

        // 插入图片到编辑器
        insertImgFn(result.url)
      }

      ElMessage.success('图片上传成功')
    } catch (error) {
      ElMessage.error('图片上传失败: ' + error.message)
      console.error('上传错误:', error)
    }
  }

  addEditorInstance.create()

  // 设置初始内容（如果需要）
  if (addForm.value.pdetails) {
    addEditorInstance.txt.html(addForm.value.pdetails)
  }
}

// 初始化编辑商品的富文本编辑器
const initEditEditor = () => {
  if (editEditorInstance) {
    editEditorInstance.destroy()
  }

  editEditorInstance = new WangEditor(editor.value)

  // 配置编辑器
  editEditorInstance.config.showLinkImg = false
  editEditorInstance.config.showLinkImgAlt = false
  editEditorInstance.config.showLinkImgHref = false
  editEditorInstance.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
  editEditorInstance.config.uploadFileName = 'file'

  // 自定义图片上传到阿里云OSS
  editEditorInstance.config.customUploadImg = async (files, insertImgFn) => {
    try {
      const ossClient = client()

      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const fileName = 'abc/sp'+getFileNameUUID() + '.' + file.name.split('.').pop()

        // 上传文件到OSS
        const result = await ossClient.put(fileName, file)

        // 插入图片到编辑器
        insertImgFn(result.url)
      }

      ElMessage.success('图片上传成功')
    } catch (error) {
      ElMessage.error('图片上传失败: ' + error.message)
      console.error('上传错误:', error)
    }
  }

  editEditorInstance.create()

  // 设置初始内容
  if (editForm.value.pdetails) {
    editEditorInstance.txt.html(editForm.value.pdetails)
  }
}

// 销毁编辑器
const destroyEditors = () => {
  if (addEditorInstance) {
    addEditorInstance.destroy()
    addEditorInstance = null
  }
  if (editEditorInstance) {
    editEditorInstance.destroy()
    editEditorInstance = null
  }
}

// 加载商品数据
const loadGoods = async () => {
  try {
    console.log('请求参数:', {
      page: currentPage.value,
      limit: pageSize.value
    })

    const response = await axios.get('api/products/page', {
      params: {
        page: currentPage.value,
        limit: pageSize.value
      },
      headers: {
        'Accept': 'application/json'
      }
    })

    console.log('服务端响应:', response)

    if (response && response.code === 200) {
      const pageData = response.data
      console.log('分页数据:', pageData)

      if (pageData && pageData.records) {
        goodsList.value = pageData.records
        total.value = pageData.total
      } else {
        goodsList.value = []
        total.value = 0
      }
    } else {
      console.error('获取商品数据失败:', response)
      goodsList.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('加载商品数据失败:', error)
    if (error.response && typeof error.response.data === 'string' &&
        error.response.data.includes('<html')) {
      console.error('错误：请求返回了HTML页面而不是JSON数据，请检查后端服务是否正常运行')
    }
  }
}

// 分页变化处理
const handlePageChange = (page) => {
  currentPage.value = page
  loadGoods()
}

// 每页数量改变处理
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadGoods()
}

// 格式化时间
const formatDateTime = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 格式化状态
const formatStatus = (status) => {
  return status === 0 ? '可售' : '不可售'
}

// 自定义上传到阿里云OSS（添加商品 - 普通图片）
const uploadToOSS = async (options) => {
  const { file, onSuccess, onError } = options

  try {
    const ossClient = client()
    const fileName ='abc/banner'+ getFileNameUUID() + '.' + file.name.split('.').pop()

    // 上传文件到OSS
    const result = await ossClient.put(fileName, file)

    // 将图片URL添加到表单中
    addForm.value.images.push(result.url)

    // 通知上传成功
    onSuccess(result.url)
    ElMessage.success('图片上传成功')
  } catch (error) {
    onError(error)
    ElMessage.error('图片上传失败: ' + error.message)
    console.error('上传错误:', error)
  }
}

// 自定义上传到阿里云OSS（添加商品 - 缩略图）
const uploadThumbnailToOSS = async (options) => {
  const { file, onSuccess, onError } = options

  try {
    const ossClient = client()
    const fileName = 'abc/small'+getFileNameUUID() + '_thumb.' + file.name.split('.').pop()

    // 上传文件到OSS
    const result = await ossClient.put(fileName, file)

    // 将缩略图URL存储到专门的字段
    addForm.value.thumbnail = result.url

    // 通知上传成功
    onSuccess(result.url)
    ElMessage.success('缩略图上传成功')
  } catch (error) {
    onError(error)
    ElMessage.error('缩略图上传失败: ' + error.message)
    console.error('上传错误:', error)
  }
}

// 自定义上传到阿里云OSS（编辑商品 - 普通图片）
const uploadEditToOSS = async (options) => {
  const { file, onSuccess, onError } = options

  try {
    const ossClient = client()
    const fileName = 'abc/banner'+getFileNameUUID() + '.' + file.name.split('.').pop()

    // 上传文件到OSS
    const result = await ossClient.put(fileName, file)

    // 将图片URL添加到表单中
    editForm.value.images.push(result.url)

    // 通知上传成功
    onSuccess(result.url)
    ElMessage.success('图片上传成功')
  } catch (error) {
    onError(error)
    ElMessage.error('图片上传失败: ' + error.message)
    console.error('上传错误:', error)
  }
}

// 自定义上传到阿里云OSS（编辑商品 - 缩略图）
const uploadEditThumbnailToOSS = async (options) => {
  const { file, onSuccess, onError } = options

  try {
    const ossClient = client()
    const fileName = 'abc/small'+getFileNameUUID() + '_thumb.' + file.name.split('.').pop()

    // 上传文件到OSS
    const result = await ossClient.put(fileName, file)

    // 将缩略图URL存储到专门的字段
    editForm.value.thumbnail = result.url

    // 通知上传成功
    onSuccess(result.url)
    ElMessage.success('缩略图上传成功')
  } catch (error) {
    onError(error)
    ElMessage.error('缩略图上传失败: ' + error.message)
    console.error('上传错误:', error)
  }
}

// 处理文件移除（添加商品 - 普通图片）
const handleRemove = (file) => {
  const index = addForm.value.images.indexOf(file.url)
  if (index > -1) {
    addForm.value.images.splice(index, 1)
  }
}

// 处理缩略图移除（添加商品）
const handleThumbnailRemove = (file) => {
  addForm.value.thumbnail = ''
}

// 处理文件移除（编辑商品 - 普通图片）
const handleEditRemove = (file) => {
  const index = editForm.value.images.indexOf(file.url)
  if (index > -1) {
    editForm.value.images.splice(index, 1)
  }
}

// 处理缩略图移除（编辑商品）
const handleEditThumbnailRemove = (file) => {
  editForm.value.thumbnail = ''
}

// 提交添加商品表单
const submitAddForm = async () => {
  try {
    // 验证必填字段
    if (!addForm.value.pname) {
      ElMessage.error('请输入商品名称')
      return
    }

    if (!addForm.value.price || isNaN(addForm.value.price)) {
      ElMessage.error('请输入有效价格')
      return
    }

    if (!addForm.value.stock || isNaN(addForm.value.stock)) {
      ElMessage.error('请输入有效库存')
      return
    }

    // 获取富文本编辑器内容
    if (addEditorInstance) {
      addForm.value.pdetails = addEditorInstance.txt.html()
    }

    // 构造请求数据
    const requestData = {
      pname: addForm.value.pname,
      price: parseFloat(addForm.value.price),
      stock: parseInt(addForm.value.stock),
      status: addForm.value.status,
      pdesc: addForm.value.pdesc,
      pdetails: addForm.value.pdetails,
      pimg1: addForm.value.images[0] || '',
      pimg2: addForm.value.images[1] || '',
      pimg3: addForm.value.images[2] || '',
      smallpic: addForm.value.thumbnail || '', // 使用缩略图字段
    }

    // 发送请求到后端（需要后端提供相应的添加商品接口）
    const response = await axios.post('/api/products/add', requestData)

    if (response.code === 200) {
      ElMessage.success('商品添加成功')
      addDialogVisible.value = false
      resetAddForm()
      loadGoods() // 重新加载商品列表
    } else {
      ElMessage.error('商品添加失败: ' + response.message)
    }
  } catch (error) {
    ElMessage.error('商品添加失败: ' + error.message)
    console.error('添加商品错误:', error)
  }
}

// 打开编辑对话框
const openEditDialog = (row) => {
  // 填充编辑表单数据
  editForm.value = {
    pid: row.pid,
    pname: row.pname,
    price: row.price,
    stock: row.stock,
    status: row.status,
    pdesc: row.pdesc,
    pdetails: row.pdetails,
    images: [
      row.pimg1,
      row.pimg2,
      row.pimg3
    ].filter(img => img), // 过滤掉空值
    thumbnail: row.smallpic || '' // 填充缩略图
  }
  editDialogVisible.value = true
}

// 提交编辑商品表单
const submitEditForm = async () => {
  try {
    // 验证必填字段
    if (!editForm.value.pname) {
      ElMessage.error('请输入商品名称')
      return
    }

    if (!editForm.value.price || isNaN(editForm.value.price)) {
      ElMessage.error('请输入有效价格')
      return
    }

    if (!editForm.value.stock || isNaN(editForm.value.stock)) {
      ElMessage.error('请输入有效库存')
      return
    }

    // 获取富文本编辑器内容
    if (editEditorInstance) {
      editForm.value.pdetails = editEditorInstance.txt.html()
    }

    // 构造请求数据
    const requestData = {
      pid: editForm.value.pid,
      pname: editForm.value.pname,
      price: parseFloat(editForm.value.price),
      stock: parseInt(editForm.value.stock),
      status: editForm.value.status,
      pdesc: editForm.value.pdesc,
      pdetails: editForm.value.pdetails,
      pimg1: editForm.value.images[0] || '',
      pimg2: editForm.value.images[1] || '',
      pimg3: editForm.value.images[2] || '',
      smallpic: editForm.value.thumbnail || '', // 使用缩略图字段
    }

    // 发送请求到后端（需要后端提供相应的编辑商品接口）
    const response = await axios.put('/api/products/update', requestData)

    if (response.code === 200) {
      ElMessage.success('商品编辑成功')
      editDialogVisible.value = false
      loadGoods() // 重新加载商品列表
    } else {
      ElMessage.error('商品编辑失败: ' + response.message)
    }
  } catch (error) {
    ElMessage.error('商品编辑失败: ' + error.message)
    console.error('编辑商品错误:', error)
  }
}

// 删除商品
const deleteProduct = (row) => {
  ElMessageBox.confirm(
      `确定要删除商品 "${row.pname}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    try {
      // 发送删除请求到后端
      const response = await axios.post('/api/products/delById?id='+row.pid)

      if (response.code === 200) {
        ElMessage.success('商品删除成功')
        loadGoods() // 重新加载商品列表
      } else {
        ElMessage.error('商品删除失败: ' + response.message)
      }
    } catch (error) {
      ElMessage.error('商品删除失败: ' + error.message)
      console.error('删除商品错误:', error)
    }
  }).catch(() => {
    // 用户取消删除
    ElMessage.info('已取消删除')
  })
}

//批量删除
const delSelected=()=>{
  const rows = tableRef.value.getSelectionRows()
  const ids = rows.map(row => row.pid)
  if (ids.length === 0) {
    ElMessage.error('请选择要删除的商品')
    return
  }
  axios.post('/api/products/delBatch', ids).then(res => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success(res.msg)
    loadGoods() // 重新加载商品列表
  })
}

// 重置添加表单
const resetAddForm = () => {
  addForm.value = {
    pname: '',
    price: '',
    stock: '',
    status: 0,
    pdesc: '',
    pdetails: '',
    images: [],
    thumbnail: ''
  }
}

// 关闭对话框时重置表单
const handleCloseDialog = () => {
  resetAddForm()
  addDialogVisible.value = false
  destroyEditors()
}

const handleCloseEditDialog = () => {
  editDialogVisible.value = false
  destroyEditors()
}

// 初始化加载
onMounted(() => {
  loadGoods()
})
</script>

<template>
  <div class="goods-container">
    <h2>商品列表</h2>

    <!-- 添加商品按钮 -->
    <div class="btu">
      <el-button type="danger" @click="delSelected" >批量删除</el-button>
      <el-button type="primary" @click="addDialogVisible = true">添加商品</el-button>

    </div>

    <!-- 商品表格 -->
    <el-table :data="goodsList" ref="tableRef" style="width: 100%" :loading="goodsList.length === 0 && total === 0">
      <el-table-column type="selection" label="选择"></el-table-column>
      <el-table-column label="序号" type="index" align="center"/>
      <el-table-column prop="pid" label="商品ID" width="80" align="center" />
      <el-table-column prop="pname" label="商品名称" width="150" align="center" />
      <el-table-column prop="price" label="价格" width="80" align="center" />
      <el-table-column prop="stock" label="库存" width="80" align="center" />
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">
            {{ formatStatus(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pdesc" label="商品描述" width="200" show-overflow-tooltip align="center" />
      <el-table-column prop="pdetails" label="商品详情" width="200" show-overflow-tooltip align="center" />
      <el-table-column prop="pimg1" label="图片1" width="100" align="center">
        <template #default="scope">
          <el-image
              v-if="scope.row.pimg1"
              :src="scope.row.pimg1"
              style="width: 50px; height: 50px"
              fit="cover"
              preview-teleported
              :preview-src-list="[scope.row.pimg1]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="pimg2" label="图片2" width="100" align="center">
        <template #default="scope">
          <el-image
              v-if="scope.row.pimg2"
              :src="scope.row.pimg2"
              style="width: 50px; height: 50px"
              fit="cover"
              preview-teleported
              :preview-src-list="[scope.row.pimg2]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="pimg3" label="图片3" width="100" align="center">
        <template #default="scope">
          <el-image
              v-if="scope.row.pimg3"
              :src="scope.row.pimg3"
              style="width: 50px; height: 50px"
              fit="cover"
              preview-teleported
              :preview-src-list="[scope.row.pimg3]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="smallpic" label="缩略图" width="100" align="center">
        <template #default="scope">
          <el-image
              v-if="scope.row.smallpic"
              :src="scope.row.smallpic"
              style="width: 50px; height: 50px"
              fit="cover"
              preview-teleported
              :preview-src-list="[scope.row.smallpic]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="160" align="center">
        <template #default="scope">
          {{ formatDateTime(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="160" align="center">
        <template #default="scope">
          {{ formatDateTime(scope.row.updatedAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button color="green" size="mini" circle icon="edit" @click="openEditDialog(scope.row)"></el-button>
          <el-button color="red" size="mini" circle icon="delete" @click="deleteProduct(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        style="margin-top: 20px; justify-content: center;"
        background
    />

    <!-- 添加商品对话框 -->
    <el-dialog
        v-model="addDialogVisible"
        title="添加商品"
        width="800px"
        @open="initAddEditor"
        @close="handleCloseDialog"
    >
      <el-form :model="addForm" label-width="100px">
        <el-form-item label="商品名称" required>
          <el-input v-model="addForm.pname" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="价格" required>
          <el-input v-model="addForm.price" type="number" placeholder="请输入价格" />
        </el-form-item>

        <el-form-item label="库存" required>
          <el-input v-model="addForm.stock" type="number" placeholder="请输入库存数量" />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="addForm.status" placeholder="请选择状态">
            <el-option label="可售" :value="0" />
            <el-option label="不可售" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input
              v-model="addForm.pdesc"
              type="textarea"
              placeholder="请输入商品描述"
              :rows="2"
          />
        </el-form-item>

        <el-form-item label="商品详情">
          <div ref="editor" style="border: 1px solid #ccc; min-height: 300px;"></div>
        </el-form-item>

        <!-- 缩略图上传 -->
        <el-form-item label="商品缩略图">
          <el-upload
              class="upload-demo"
              action="#"
              :http-request="uploadThumbnailToOSS"
              :on-remove="handleThumbnailRemove"
              :file-list="addForm.thumbnail ? [{name: 'thumbnail', url: addForm.thumbnail}] : []"
              :limit="1"
              :auto-upload="true"
              list-type="picture-card"
          >
            <el-icon><plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                请上传商品缩略图（最多1张）
              </div>
            </template>
          </el-upload>

          <!-- 缩略图预览 -->
          <div class="image-preview" v-if="addForm.thumbnail">
            <div class="image-item">
              <el-image
                  :src="addForm.thumbnail"
                  style="width: 80px; height: 80px; margin-right: 10px;"
                  fit="cover"
                  preview-teleported
                  :preview-src-list="[addForm.thumbnail]"
              />
              <el-button
                  type="danger"
                  icon="Delete"
                  circle
                  size="small"
                  @click="addForm.thumbnail = ''"
              />
            </div>
          </div>
        </el-form-item>

        <!-- 商品图片上传 -->
        <el-form-item label="商品图片">
          <el-upload
              class="upload-demo"
              action="#"
              :http-request="uploadToOSS"
              :on-remove="handleRemove"
              :file-list="[]"
              limit="3"
              multiple
              :auto-upload="true"
              list-type="picture-card"
          >
            <el-icon><plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                支持多选，可上传任意数量图片
              </div>
            </template>
          </el-upload>

          <!-- 已上传图片预览 -->
          <div class="image-preview" v-if="addForm.images.length > 0">
            <div
                v-for="(img, index) in addForm.images"
                :key="index"
                class="image-item"
            >
              <el-image
                  :src="img"
                  style="width: 80px; height: 80px; margin-right: 10px;"
                  fit="cover"
                  preview-teleported
                  :preview-src-list="addForm.images"
              />
              <el-button
                  type="danger"
                  icon="Delete"
                  circle
                  size="small"
                  @click="() => addForm.images.splice(index, 1)"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleCloseDialog">取消</el-button>
                    <el-button type="primary" @click="submitAddForm">确定</el-button>
                </span>
      </template>
    </el-dialog>

    <!-- 编辑商品对话框 -->
    <el-dialog
        v-model="editDialogVisible"
        title="编辑商品"
        width="800px"
        @open="initEditEditor"
        @close="handleCloseEditDialog"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="商品名称" required>
          <el-input v-model="editForm.pname" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item label="价格" required>
          <el-input v-model="editForm.price" type="number" placeholder="请输入价格" />
        </el-form-item>

        <el-form-item label="库存" required>
          <el-input v-model="editForm.stock" type="number" placeholder="请输入库存数量" />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="请选择状态">
            <el-option label="可售" :value="0" />
            <el-option label="不可售" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input
              v-model="editForm.pdesc"
              type="textarea"
              placeholder="请输入商品描述"
              :rows="2"
          />
        </el-form-item>

        <el-form-item label="商品详情">
          <div ref="editor" style="border: 1px solid #ccc; min-height: 300px;"></div>
        </el-form-item>

        <!-- 缩略图上传 -->
        <el-form-item label="商品缩略图">
          <el-upload
              class="upload-demo"
              action="#"
              :http-request="uploadEditThumbnailToOSS"
              :on-remove="handleEditThumbnailRemove"
              :file-list="editForm.thumbnail ? [{name: 'thumbnail', url: editForm.thumbnail}] : []"
              :limit="1"
              :auto-upload="true"
              list-type="picture-card"
          >
            <el-icon><plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                请上传商品缩略图（最多1张）
              </div>
            </template>
          </el-upload>

          <!-- 缩略图预览 -->
          <div class="image-preview" v-if="editForm.thumbnail">
            <div class="image-item">
              <el-image
                  :src="editForm.thumbnail"
                  style="width: 80px; height: 80px; margin-right: 10px;"
                  fit="cover"
                  preview-teleported
                  :preview-src-list="[editForm.thumbnail]"
              />
              <el-button
                  type="danger"
                  icon="Delete"
                  circle
                  size="small"
                  @click="editForm.thumbnail = ''"
              />
            </div>
          </div>
        </el-form-item>

        <!-- 商品图片上传 -->
        <el-form-item label="商品图片">
          <el-upload
              class="upload-demo"
              action="#"
              :http-request="uploadEditToOSS"
              :on-remove="handleEditRemove"
              :file-list="[]"
              multiple
              :auto-upload="true"
              list-type="picture-card"
          >
            <el-icon><plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                支持多选，可上传任意数量图片
              </div>
            </template>
          </el-upload>

          <!-- 已上传图片预览 -->
          <div class="image-preview" v-if="editForm.images.length > 0">
            <div
                v-for="(img, index) in editForm.images"
                :key="index"
                class="image-item"
            >
              <el-image
                  :src="img"
                  style="width: 80px; height: 80px; margin-right: 10px;"
                  fit="cover"
                  preview-teleported
                  :preview-src-list="editForm.images"
              />
              <el-button
                  type="danger"
                  icon="Delete"
                  circle
                  size="small"
                  @click="() => editForm.images.splice(index, 1)"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleCloseEditDialog">取消</el-button>
                    <el-button type="primary" @click="submitEditForm">确定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.goods-container {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-table {
  margin-top: 20px;
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.image-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-right: 10px;
}

.upload-demo {
  width: 100%;
}
</style>
